<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	BODY {
		FONT-FAMILY:굴림;
		FONT-SIZE:10pt;
		LINE-HEIGHT:normal;
		TEXT-DECORATION:none;
	}
	#map_canvas {
            width: 400px;
            height: 500px;
	}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko&region=KR"></script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	// 페이지 로딩시 작업
	$(document).ready(function(){
		var latitude = $("#latitude").val();
		var longitude = $("#longitude").val();
		// 구글맵
		var latlng = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
            // ROADMAP, SATELLITE, HYBRID, TERRAIN
            
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        //map.addOverlay(marker);
		// 구글맵 끝
		var replyrefno=$("#replyrefno").val();
		var replywriter=$("#replywriter").val();
		$.ajax({
			type:"POST",
			url:"board.do",
			data:"command=boardReplyView&replyrefno="+replyrefno,
			dataType:"json",  // json으로 datatype을 명시 
			success:function(jsonData){ // data 변수로 json 입력된다.						
					//alert(jsonData.replyList);							
					// function 을 인자값으로 하여 table 처리 
					$("#replyDiv").html(function(){	
						var obj=jsonData.replyList;
						var table="<center><table border=0 width=600px>";
						table+="<tr align=center><th width=350px>내용</th><th width=50px>작성자</th><th width=150px>날짜</th><th width=50px></th></tr>";
						for(i=0;i<obj.length;i++){
							table+="<tr>";
							table+="<td>"+obj[i].replycontents+"</td>";
							table+="<td>"+obj[i].replywriter+"</td>";
							table+="<td>"+obj[i].replywrittendate+"</td>"	;	
							table+="<td>";
							// if문 추가할것!! 자신의 리플에만 표시되도록!!
							if($("#replywriter").val()==obj[i].replywriter||$("#replywriter").val()=='admin'){
								//table+="<input type='button', value='수정', id='replyUpdateBtn'>";
								table+="<input type='button', value='삭제', id='replyDeleteBtn' onclick='javascript:delReply("+obj[i].replyrefno+","+obj[i].replyno+");'>";
							}
							// if문 여기까지...
							table+="</td>";
							table+="</tr>";
						}
						table+="</table></center>";							
						return table;
					});//html
					$("#replycontents").val("");
					/* $("#replyDiv").on("click", "#replyDeleteBtn", function(){
						alert($("#replynoHidden").val());
					}); */
					/* $("#replyDiv").on("click", ":button", function(){
						alert($("#replynoHidden").val());
					}); */
			}
		}); // 페이지 로딩시 ajax 끝
		//리플 작성 스크립트
		$("#replyBtn").click(function(){
			var replycontents=$("#replycontents").val();
			$.ajax({
				type:"POST",
				url:"board.do",
				data:"command=boardReplyWriter&replyrefno="+replyrefno+"&replywriter="+replywriter+"&replycontents="+replycontents,
				dataType:"json",  // json으로 datatype을 명시 
				success:function(jsonData){ // data 변수로 json 입력된다.						
						//alert(jsonData.replyList);							
						// function 을 인자값으로 하여 table 처리 
						$("#replyDiv").html(function(){	
							var obj=jsonData.replyList;
							var table="<center><table border=0 width=600px>";
							table+="<tr align=center><th width=350px>내용</th><th width=50px>작성자</th><th width=150px>날짜</th><th width=50px></th></tr>";
							for(i=0;i<obj.length;i++){
								table+="<tr>";
								table+="<td>"+obj[i].replycontents+"</td>";
								table+="<td>"+obj[i].replywriter+"</td>";
								table+="<td>"+obj[i].replywrittendate+"</td>"	;	
								table+="<td>";
								// if문 추가할것!! 자신의 리플에만 표시되도록!!
								if($("#replywriter").val()==obj[i].replywriter||$("#replywriter").val()=='admin'){
									//table+="<input type='button', value='수정', id='replyUpdateBtn'>";
									table+="<input type='button', value='삭제', id='replyDeleteBtn' onclick='javascript:delReply("+obj[i].replyrefno+","+obj[i].replyno+");'>";
								}
								// if문 여기까지...
								table+="</td>";
								table+="</tr>";
							}
							table+="</table></center>";							
							return table;
						});//html
						$("#replycontents").val("");
				}
			}); // 리플 작성시 ajax 끝
		});
	}); // 페이지 로딩시... 끝
	// 리플 삭제 스크립트
	function delReply(replyrefno, replyno){
		//alert("부모 : "+replyrefno+"// 자식 : "+replyno);
		$.ajax({
			type:"POST",
			url:"board.do",
			data:"command=boardReplyDelete&replyrefno="+replyrefno+"&replyno="+replyno,
			dataType:"json",
			success:function(jsonData){
				$("#replyDiv").html(function(){
					var obj=jsonData.replyList;
					var table="<center><table border=0 width=600px>";
					table+="<tr align=center><th width=350px>내용</th><th width=50px>작성자</th><th width=150px>날짜</th><th width=50px></th></tr>";
					for(i=0;i<obj.length;i++){
						table+="<tr>";
						table+="<td>"+obj[i].replycontents+"</td>";
						table+="<td>"+obj[i].replywriter+"</td>";
						table+="<td>"+obj[i].replywrittendate+"</td>"	;	
						table+="<td>";
						// if문 추가할것!! 자신의 리플에만 표시되도록!!
						if($("#replywriter").val()==obj[i].replywriter||$("#replywriter").val()=='admin'){
							//table+="<input type='button', value='수정', id='replyUpdateBtn'>";
							table+="<input type='button', value='삭제', id='replyDeleteBtn' onclick='javascript:delReply("+obj[i].replyrefno+","+obj[i].replyno+");'>";
						}
						// if문 여기까지...
						table+="</td>";
						table+="</tr>";
					}
					table+="</table></center>";							
					return table;
				});//html
				$("#replycontents").val("");
			}
		}); // 리플 삭제시 ajax 끝
	} // 리플 삭제 끝
	// 게시물 삭제 스크립트
	function deleteBoard(no, replyrefno){
		var flag = confirm("삭제할래요?");
		if(flag){
			location.href="board.do?command=boardDeleteContent&no="+no+"&replyrefno="+replyrefno;	
		}
	}
	// 게시물 수정 스크립트
	function updateBoard(no){
		var flag = confirm("수정할래요?");
		if(flag){
			location.href="board.do?command=boardUpdateView&no="+no;
		}
	}
</script>
</head>
<body>
	<c:choose>
		<c:when test="${sessionScope.memberVO==null}">
			<script>
				alert('로그인하셔야 보실 수 있습니다.');
				location.href = "index.jsp";
			</script>
		</c:when>
		<c:otherwise><center>
		<table border=0>
			<tr>
				<td>
					<b>글번호</b> : ${requestScope.boardVO.no }
				</td>
			</tr>
			<tr>
				<td>
					<b>글제목</b> : ${requestScope.boardVO.title }
				</td>
				<td align=right>
					<b>조회수</b> : ${requestScope.boardVO.count }
				</td>
			</tr>
			<tr>
				<td>
					<b>작성자</b> : ${requestScope.boardVO.writer }
				</td>
				<td align=right>
					<b>글작성날짜</b> : ${requestScope.boardVO.writtenDate }
				</td>
			</tr>
			<tr>
				<td>
					<img src="${requestScope.boardVO.imgsrc }${requestScope.boardVO.imgfilename}" width="400px" height="500px">
				</td>
				<td>
					<div id="map_canvas"></div>
				</td>
			</tr>
			<tr>
				<td colspan=2>
					${requestScope.boardVO.contents }
				</td>
			</tr>
			<tr>
				<td colspan=2><center>
					<c:if test="${requestScope.boardVO.writer==sessionScope.memberVO.id}">
						<img src="${path}/image/board/button/delete_btn.jpg" alt="삭제" onclick="deleteBoard(${requestScope.boardVO.no }, ${requestScope.boardVO.no })" border="0">
						<img src="${path}/image/board/button/modify_btn.jpg" alt="수정" onclick="updateBoard(${requestScope.boardVO.no })" border="0">
					</c:if>
				</center></td>
			</tr>
		</table>
					</center>
		</c:otherwise>
	</c:choose>
	<hr>
	<div id="replyDiv"></div>
	<input type="hidden" value="${requestScope.boardVO.no }" id="replyrefno">
	<input type="hidden" value="${sessionScope.memberVO.id }" id="replywriter">
	<input type="hidden" value="${requestScope.boardVO.latitude }" id="latitude">
	<input type="hidden" value="${requestScope.boardVO.longitude }" id="longitude">
	<center>
	<input type="text" size=50 id="replycontents"><input type="button" id="replyBtn" value="리플 작성"><br><br>
	<a href="board.do?command=boardList"><img src="${path}/image/board/button/list_btn.jpg" alt="리스트" border="0"></a>
	</center>
</body>
</html>